<template>
    <div class="commission-policy">
        <el-table :data="commissionData" border style="width: 100%">
            <el-table-column prop="level" label="分销等级" width="180">
                <template #default="scope">
                    <span>{{ scope.row.level }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="commissionRate" label="佣金比例" width="180">
                <template #default="scope">
                    <span>{{ scope.row.commissionRate }}%</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog :visible.sync="dialogVisible" title="修改佣金比例">
            <el-form :model="editForm" label-width="120px">
                <el-form-item label="分销等级">
                    <el-input v-model="editForm.level" disabled></el-input>
                </el-form-item>
                <el-form-item label="佣金比例">
                    <el-input-number v-model="editForm.commissionRate" :min="0" :max="100"></el-input-number>
                </el-form-item>
            </el-form>
            <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveEdit">保存</el-button>
        </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import {getPolicy, updateById} from "@/api/distribute";

export default {
    name: "policy",
    data() {
        return {
            commissionData: [
                {level: "基础佣金比例", commissionRate: 10},
                {level: "一级佣金比例", commissionRate: 5},
                {level: "二级佣金比例", commissionRate: 2}
            ],
            dialogVisible: false,
            editForm: {
                level: "",
                commissionRate: 0
            },
            currentIndex: -1
        };
    },
    created() {
        this.getTable()
    },
    methods: {
        getTable(){
            getPolicy().then(res=>{
                this.commissionData = res;
            })
        },
        handleEdit(index, row) {
            this.currentIndex = index;
            this.editForm.level = row.level;
            this.editForm.commissionRate = row.commissionRate;
            this.dialogVisible = true;
        },
        saveEdit() {
            this.commissionData[this.currentIndex].commissionRate = this.editForm.commissionRate;
            updateById({
                id:this.commissionData[this.currentIndex].id,
                commissionRate:this.commissionData[this.currentIndex].commissionRate
            }).then(res=>{
                if(res){
                    this.$message.success("修改成功");
                    this.getTable();
                    this.dialogVisible = false;
                }
            })
        }
    }
};
</script>

<style scoped lang="scss">
.commission-policy {
    padding: 20px;
}
</style>
